<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>建议使用信管帮APP</title>
    <!-- 设计稿iPhone XR 414 html基础font-size=41.1px -->
    <!-- 该页面跳转缓慢，取消base64图片素材方法，采用webp图片素材格式 -->
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html,body{
            height: 100%;
        }
        ul li{
            list-style: none;
        }
        a{
            text-decoration: none;
            
        }
        a:link{
            color: #404040;
        }
        a:visited{
            color: #404040;
        }
        a:hover{
            color: #404040;
        }
        a:active{
            color: #404040;
        }
        ::-webkit-scrollbar{
            /* width: 0; 移动端取消滚动条无效*/
            display: none;
        }
        body{
            background: #f4f4f4;/*#2493f1*/
            display: flex;
            flex-direction: column;
            font-family: 微软雅黑;
            font-size: .4348rem;
            letter-spacing: .0169rem;
            position: relative;
            overflow: hidden;/*禁止上下滑动*/
            -webkit-user-select:none;
            -moz-user-select:none;
            -ms-user-select:none;
            user-select:none;
        }
        section{/*
            border: 1px solid rgb(0, 255, 21);*/
            flex: 1;
            background-color: #f6f6f6cb;
            display: flex;
            flex-direction: column;
            padding: 0 .4831rem;
            overflow: scroll;
        }
        section .title{
            font-size: .5797rem;
            font-weight: 500;
            margin: .7246rem 0 .2415rem 0;
            text-align: center;
            letter-spacing: .0072rem;
        }
        .container{/*
            border: 1px solid rgba(255, 0, 0, 0.821);*/
            border-radius: .1691rem;
            background: #f6f6f6cb;
            box-sizing: border-box;
            padding: .3623rem 0;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            color: #fff;
            /*
            box-shadow: .1208rem .1208rem .0725rem rgba(59, 59, 59, 0.026);
            */
        }
        .container .left{/*
            border: 1px solid rgba(255, 0, 0, 0.821);*/
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: flex-start;
            width: 90%;
            height: 1.2077rem;

        }
        input{
            border: .0242rem solid rgba(78, 78, 78, 0.364);
            border-radius: .0725rem;
            font-size: .4348rem;
            height: .9662rem;
            line-height: .9662rem;
            width: 100%;
            box-sizing: border-box;
            padding-left: .1691rem;
            outline: none;
        }
        
        .container .right{
            /*
            border: 1px solid rgba(136, 255, 0, 0.821);*/
            width: 90%;
            margin-top: .3623rem;
            font-size: .4348rem;
            font-weight: 550;

            
        }
        button{
            width: 100%;
            height: .9662rem;
            border: none;
            border-radius: .0483rem;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            font-size: .3623rem;
            background: #00BAC6;
            color: #fff;

        }
        input[type='checkbox']{
            width: .4348rem;
            height: .4348rem;
            margin-right: .0725rem;
            background: none;
        }
        .readme{
            /**/
            margin-top: .1932rem;
            color: #575757;
            font-weight: 400;
            font-size: .3623rem;
            letter-spacing: 0;
            height: .7246rem;
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            align-items: center;
        }
        .readme span{
            color: #248EE1;
            
        }
        /*
        input[type="radio"] {
            margin-top: .2415rem;
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            border-radius: 0;
            width: 20px;
            height: 20px;
            border: 1px solid #ccc;
            outline: none;
            transition: all .3s;
            }
            input[type="radio"]:checked {
            background-color: #337ab7;
            color: #fff;
            border-color: #337ab7;
            }*/
        .right .msg{/**/
            width: 100%;
            text-align: center;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            color: #0ac800;
        }



        .container .right{
            /*
            border: 1px solid rgba(255, 0, 0, 0.821);*/
        }
        .methods{
            /*
            border: 1px solid rgba(255, 0, 0, 0.821);*/
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            margin-top: .4831rem;
        }
        .show_method{
            /*
            border: 1px solid rgba(255, 0, 0, 0.821);*/
            
            
            font-size: .3623rem;
            color: #2493f1;

        }
        .h1{
            font-size: .5314rem;
            font-weight: 550;
            margin-top: .7246rem;
        }
        .h2{
            font-size: .4589rem;
            font-weight: 550;
            margin-top: .7246rem;
        }
        .m{
            font-size: .4348rem;
            line-height: .8454rem;
            color: #575757;
            margin-bottom: .4831rem;
        }
        .methods>div{
            /*
            border: 1px solid rgba(0, 81, 255, 0.821);*/
            display: flex;
            flex-direction: column;
            box-sizing: border-box;
            padding-bottom: 1.6908rem;

        }

        .methods>div>div{
            /*
            border: 1px solid rgba(26, 255, 0, 0.821);*/
            width: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
        .methods>div>div img{
            width: 70%;
            box-shadow: .1208rem .1208rem .1208rem rgba(121, 121, 121, 0.307);
        }
        .realInfo{
            /*
            border: 1px solid rgba(26, 255, 0, 0.821);*/
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;

        }
        .realInfo ul{
            /*
            border: 1px solid rgba(255, 77, 0, 0.821);*/
            border-radius: .1208rem;
            width: 90%;
            box-sizing: border-box;
            padding: .4831rem .2415rem;
            overflow: hidden;
            background: #00bac6;
            color: #fff;
        }
        .realInfo li{
            /*
            border: 1px solid rgba(255, 77, 0, 0.821);*/
            width: 100%;
            border-bottom: .0121rem solid #ffffff3b;
            height: .9662rem;
            font-size: .4589rem;
            line-height: .9662rem;
            display: flex;
            flex-direction: row;
        }
        
        .realInfo li span:nth-child(1){
            width: 1.3285rem;
            font-weight: 550;
        }
        .realInfo li span:nth-child(2){
            flex: 1;
            display: inline-block;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

    </style>
    <link rel="stylesheet" href="../../../css/header.css">
    <script src="../../../lib/jquery.min.js"></script>
    <script src="../../../lib/axios.js"></script>
    <script src="../../../lib/vue.js"></script>
    <script>
        document.addEventListener('visibilitychange',
        function(){
            if(document.visibilityState === "visible"){
                setTimeout(()=>{
                    location.reload()
                }, 1000)
            }
        }
        )
    </script>
</head>
<body>
    <header>
        <div class="backBtn"></div>
        <div class="left"></div>
        <span class="title">学历验证</span>
    </header>
    <script>
        document.querySelector(".backBtn").onclick=function(){
            window.history.go(-1)
        }
    </script>
    <section>
        <span class="title">中国高等教育学历证书验证</span>
        <div class="container">
            <div class="left">
                <input type="text" name="" id="" v-model="vcode" placeholder="请输入在线验证码">
            </div>
            <div class="right">
                <button v-show="isBtnShow" @click="yz()">验证</button>
                <div class="msg" v-show="!isBtnShow">{{msg}}</div>
                <div class="readme" v-show="isBtnShow">
                    <input type="checkbox" name="" id="ty">
                    <label for="ty">我已阅读并同意<span>《用户协议》</span>、<span>《隐私政策》</span></label>
                    
                </div>
                
            </div>
        </div>
        <div class="realInfo" v-show="isRealInfo">
            <ul>
                <li>
                    <span>姓名</span>
                    <span>{{name}}</span>
                </li>
                <li>
                    <span>性别</span>
                    <span>{{gender}}</span>
                </li>
                <li>
                    <span>院校</span>
                    <span>{{school}}</span>
                </li>
                <li>
                    <span>学院</span>
                    <span>{{xueyuan}}</span>
                </li>
                <li>
                    <span>班级</span>
                    <span>{{classes}}</span>
                </li>
                <li>
                    <span>学号</span>
                    <span>{{number}}</span>
                </li>
            </ul>
        </div>
        <div class="methods" v-show="isBtnShow">
            <span class="show_method" @click="isMethodShow = !isMethodShow;">查看教程</span>
            <div v-show="isMethodShow">
                <span class="h1">如何获取学信网在线验证码</span>

                <span class="h2">第1步</span>
                <span class="m">微信关注并进入【学信网】公众号</span>
                <div>
                    <img src="../../../images/smrz/1.webp" alt="">
                </div>

                <span class="h2">第2步</span>
                <span class="m">菜单栏选择【在线服务】->【学信档案】</span>
                <div>
                    <img src="../../../images/smrz/2.webp" alt="">
                </div>

                <span class="h2">第3步</span>
                <span class="m">登录本人学信网账号</span>
                <div>
                    <img src="../../../images/smrz/3.webp" alt="">
                </div>

                <span class="h2">第4步</span>
                <span class="m">首页进入【在线验证报告】</span>
                <div>
                    <img src="../../../images/smrz/4.webp" alt="">
                </div>

                <span class="h2">第5步</span>
                <span class="m">查看【教育部学籍在线验证报告】</span>
                <div>
                    <img src="../../../images/smrz/5.webp" alt="">
                </div>

                <span class="h2">第6步</span>
                <span class="m">在已申请的报告可查看在线验证码，复制验证码粘贴至此处可进行学历验证</span>
                <div>
                    <img src="../../../images/smrz/6.webp" alt="">
                </div>


            </div>
            
        </div>
        
        
        
        

    </section>


    

    
    
    

    <script>
        new Vue({
            el: "section",
            data: {
                school: "",
                xueyuan: "",
                number: "",
                name: "",
                classes: "",
                gender: "",
                isBtnShow: true,///////true
                vcode: "",
                msg: "验证成功√",
                isMethodShow: false,
                isRealInfo: false
            },
            methods: {
                yz(){
                    var readMe = document.querySelector("input[type='checkbox']").checked
                    if(readMe === false){
                        alert("请阅读并同意《用户协议》和《隐私政策》后再进行验证操作。")
                    }else if(readMe === true){
                        console.log("验证码："+this.vcode)
                        //发送验证请求
                        let userInfo = localStorage.getItem('XGB-user')
                        let id = JSON.parse(userInfo).id
                        let _this = this
                        axios.post(`https://fc-mp-e8e2bde5-0c0c-4622-87b5-66f8b08c3856.next.bspapp.com/edit_information/xlyz?id=${id}&vcode=${this.vcode}`)
                        .then(res=>{
                            if(res.data.code === 0){
                                 //写入新数据
                                let userInfo2 = JSON.parse(userInfo)
                                userInfo2.realInfo = {
                                    School: res.data.data.school,
                                    Xueyuan: res.data.data.xueyuan,
                                    Number: res.data.data.number,
                                    Name: res.data.data.name,
                                    Classes: res.data.data.classes,
                                    Gender: res.data.data.gender
                                }
                                localStorage.setItem('XGB-user', JSON.stringify(userInfo2))
                                _this.isBtnShow = false
                                _this.msg = "验证成功！"
                                setTimeout(()=>{
                                    let userInfo3 = localStorage.getItem('XGB-user')
                                    _this.isRealInfo = true
                                    _this.school = JSON.parse(userInfo3).realInfo.School
                                    _this.xueyuan = JSON.parse(userInfo3).realInfo.Xueyuan
                                    _this.classes = JSON.parse(userInfo3).realInfo.Classes
                                    _this.number = JSON.parse(userInfo3).realInfo.Number
                                    _this.name = JSON.parse(userInfo3).realInfo.Name
                                    _this.gender = JSON.parse(userInfo3).realInfo.Gender
                                    setTimeout(()=>{
                                        window.history.go(-1)
                                    }, 1000)
                                    
                                }, 900)
                            
                            }else{
                                console.log(res.data.mgs)
                                _this.isBtnShow = false
                                _this.msg = res.data.mgs
                                $('.msg').css('color','red')
                                setTimeout(()=>{
                                    _this.isBtnShow = true
                                    _this.msg = ""
                                    $('.msg').css('color','#0ac800')
                                }, 5000)
                            }
                            
                        })
                    }
                    

                }
            },
            mounted(){

            }
        })
        

    </script>
    
    <script>
        //根据设备宽度计算html的font-size
        function resetHtmlFont(){
            //获取html对象并动态设置font-size = 设备宽度的1/10
            document.documentElement.style.fontSize = screen.width/10 + 'px';
        }
        //执行一下
        resetHtmlFont();
        //如果窗口大小改变了，则重新计算基础font-size
        window.onresize = resetHtmlFont;
    </script>
</body>
</html>